<template>
  <div>
    <div ref="timeRuleRef" class="time-rule" @mouseleave="mouseleave" @mouseenter="mouseenter">
      <div class="time-slot">
        <div v-for="item in timePoint" :key="item + 'slot'" class="slot">
          <div class="line" />
        </div>
      </div>
      <div class="time-point">
        <div v-for="(item, index) in timePoint" :key="item + 'point'" class="point">
          <div class="line">{{ index % 10 === 0 || index === 59 ? item : '' }}</div>
        </div>
      </div>
      <div ref="moveLineRef" class="move-line" @mousedown="mousedown" @mouseup="mouseup">
        <div ref="timeValueRef" class="time-value" />
      </div>
    </div>
  </div>
</template>

<script>
  import MoveLine from '@/utils/MoveLine.js'
  export default {
    name: 'time-rule',
    props: {
      time: {
        type: Array,
        required: true
      }
    },
    data() {
      return {
        lineSample: null,
        flag: false
      }
    },
    computed: {
      timePoint() {
        const value = this.time[0].split(':')[0]
        const arr = []
        for (let i = 0; i < 60; i++) {
          let time = i.toString()
          if (time.length === 1) time = '0' + time
          arr.push(value + ':' + time)
        }
        return arr
      }
    },
    watch: {
      time: {
        handler() {
          this.sendArr()
        },
        immediate: false
      }
    },
    mounted() {
      this.lineSample = new MoveLine(this.$refs.moveLineRef, this.$refs.timeRuleRef, this.$refs.timeValueRef, this.timePoint)
      setInterval(() => {
      }, 3000)
    },
    methods: {
      sendArr() {
        this.lineSample.getArr(this.timePoint)
      },
      resetLine() {
        this.lineSample.resetLine()
      },
      mousedown() {
        this.flag = true
        this.lineSample.move()
      },
      mouseup() {
        this.flag = false
        this.lineSample.stop()
        this.$emit('getTimeValue', this.lineSample.timeValue)
      },
      mouseleave() {
        this.lineSample.stop()
        if (!this.flag) return
        this.$emit('getTimeValue', this.lineSample.timeValue)
      },
      mouseenter() {
        this.flag = false
      }
    }
  }
</script>

<style lang="scss" scoped>
.time-rule {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 1220px; // 会改
  height: 75px;
  padding: 0 10px;
  background-color: #111a2d;
  .time-slot {
    display: flex;
    align-items: flex-end;
    height: 16px;
    background-color: #c4c4c4;
    .slot {
      display: flex;
      justify-content: center;
      width: 20px; // 会改
      height: 40%;
      .line {
        width: 2px;
        height: 100%;
        background-color: #000;
      }
    }
    .slot:nth-child(1) {
      height: 70%;
    }
    .slot:nth-child(11) {
      height: 70%;
    }
    .slot:nth-child(21) {
      height: 70%;
    }
    .slot:nth-child(31) {
      height: 70%;
    }
    .slot:nth-child(41) {
      height: 70%;
    }
    .slot:nth-child(51) {
      height: 70%;
    }
    .slot:nth-child(60) {
      height: 70%;
    }
  }
  .time-point {
    display: flex;
    height: 30px;
    .point {
      display: flex;
      justify-content: center;
      width: 20px; // 会改
      height: 100%;
      user-select: none;
      .line {
        line-height: 30px;
        color: #fff;
      }
    }
  }
  .move-line {
    position: absolute;
    top: 0;
    left: 19px;
    width: 4px;
    height: 100%;
    cursor: move;
    background-color: #fa7124;
    &::after {
      position: absolute;
      top: 16px;
      left: -6px;
      display: inline-block;
      width: 0;
      height: 0;
      border: 8px solid transparent;
      border-top-color: #fa7124;
      content: '';
    }
    .time-value {
      position: absolute;
      top: 45px;
      left: 10px;
      display: none;
      width: 100px;
      height: 25px;
      line-height: 25px;
      color: #fff;
      text-align: center;
      background-color: #000;
      border-radius: 3px;
      user-select: none;
    }
    &:hover {
      .time-value {
        display: inline-block;
      }
    }
  }
}
</style>
